layui.use("element", function () {
  var element = layui.element;
});
layui.use('laydate', function () {
  var laydate = layui.laydate;
  laydate.render({
    elem: '#test6',
    value: '2018-11-19 - 2018-11-25',
    range: true
  });
});

layui.use('table', function () {
  var table = layui.table;
  table.render({
    elem: '#table1',
    data: vm.tableIns,
    height: 230,
    cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
    ,
    cols: [
      [ //标题栏
        {
          field: 'id',
          title: '排名',
          width: 60
        }, {
          field: 'AssetName',
          title: '资产名称',
          minWidth: 120
        }, {
          field: 'amount',
          title: '配置金额(万元)',
          width: 140
        }, {
          fixed: 'right',
          title: '操作',
          toolbar: '#barDemo',
          width: 60
        }
      ]
    ]
  });
});

var defaultB = localStorage.getItem('status')==0 ?['29.17%', '25.00%', '29.17%', '9.17%', '7.50%']:['20.45%', '22.73%', '34.09%', '9.55%', '6.36%'];
var defaultJ =  localStorage.getItem('status')==0 ?['350,000 万元', '300,000 万元', '350,000 万元', '110,000 万元', '90,000 万元']: ['450,000 万元', '500,000 万元', '750,000 万元', '210,000 万元', '140,000 万元'];
var totalC =  localStorage.getItem('status')==0 ?'总额\n120亿':'总额\n220亿';
var defaultZB = localStorage.getItem('status')==0 ? [{ value: 350000, name: '非标' }, { value: 300000, name: '债券' }, { value: 350000, name: '存款' }, { value: 110000, name: '存单' }, { value: 90000, name: '回购' }]:[{ value: 450000, name: '非标' }, { value: 500000, name: '债券' }, { value: 750000, name: '存款' }, { value: 210000, name: '存单' }, { value: 140000, name: '回购' }];

var vm = new Vue({
  el: '#app',
  data: {
    status: localStorage.getItem('status')?localStorage.getItem('status'):0,
    option1: {
      color: ['#0096FA'],
      tooltip: {
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '10%',
        containLabel: true
      },
      xAxis: [{
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五'],
        axisTick: {
          alignWithLabel: true
        }
      }],
      yAxis: [{
        name: '（万元）',
        type: 'value'
      }],
      series: [{
        name: '资产总额',
        type: 'bar',
        barWidth: '60%',
        data: [100000, 80000, 130000, 100000, 60000]
      }]
    },
    option2: {
      title: {
        top: 15,
        text: '已配置资产占比'
      },
      color: ['#0099FF', '#33CCCC', '#33CC66', '#FFCC00', '#FF0000'],
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c}万元 ({d}%)"
      },
      grid: {},
      legend: {
        orient: 'vertical',
        left: "50%",
        top: 90,
        itemWidth: 10,
        itemHeight: 10,
        data: ['非标', '债券', '存款', '存单', '回购'],
        textStyle: {
          padding: [5, 0],
          fontSize: 13
        },
        formatter: function (name) {
          var index = 0;
          var clientlabels = ['非标', '债券', '存款', '存单', '回购'];
          clientlabels.forEach(function (value, i) {
            if (value == name) {
              index = i;
            }
          });
          return " " + name + "  |  " + defaultB[index] + "  |  " + defaultJ[index];
        }
      },
      series: [{
        name: '配置资产占比',
        type: 'pie',
        radius: ['42%', '55%'],
        center: ['24%', '60%'],
        avoidLabelOverlap: false,
        label: {
          normal: {
            show: true,
            position: 'center',
            formatter: function (argument) {
              return totalC;
            },
            textStyle: {
              fontWeight: 'lighter',
              fontSize: 15,
              color: '#333',
              fontFamily: 'Microsoft YaHei'
            }
          }
        },
        labelLine: {
          normal: {
            show: false
          }
        },
        itemStyle: {
          normal: {
            borderWidth: 3,
            borderColor: '#fff',
          }
        },
        data: defaultZB
      }]
    },
    tableIns: [],
    arr1: ['¥ 12,000,000,000', '29.17%', '¥ 12,000,000,000', '100%', '¥ 0']
  },
  mounted: function () {
    this.init()
  },
  methods: {
    init: function () {
      localStorage.setItem('navigation', '<a href="#">首页</a><span lay-separator="">/</span><a href="">投资集中度管理</a><span lay-separator="">/</span><a><cite>数据概览</cite></a>');
      var myChart1 = echarts.init(document.getElementById('bar1'));
      myChart1.setOption(this.option1, true);
      var myChart2 = echarts.init(document.getElementById('bar2'));
      myChart2.setOption(this.option2, true);
      window.onresize = function () {
        myChart1.resize();
        myChart2.resize();
      }
      if (this.status == 1) {
        this.arr1 = ['¥ 20,500,000,000', '20.45%', '¥ 22,000,000,000', '93.18%', '¥ 1,500,000,000'];
      }
    }
  }
})